<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框案例</title>
		<style>
			div.cirle{
				border: 1px solid skyblue;
				width: 200px;
				height: 200px;
				border-radius: 200px;
				/* 边框阴影 box-shadow 属性 */
				box-shadow: 5px 5px 70px 5px skyblue inset;
				}
				
				div#triangle{
					border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid pink;
					width:1px;
					}
					div.kk{
						width: 0;
						border:50px solid transparent;
						border-top-color:rgba(0, 0, 170,.3);
					}
					/*outline  边框轮廓  只针对input 元素*/
					input{
						outline: 0;
					}
					  /* 实际应用  通配选择器 去掉轮廓 
					      *{outline： 0；}
					   
					  */
					
		</style>
	</head>
	<body>
		<div class="cirle"></div>
		<div id="triangle"></div>
		<div class="kk"></div>
		边框：<input type="text" />
	</body>
</html>